import React, { Component } from 'react';
import './App.css';
import { connect } from "react-redux";

class App extends Component {
  constructor(props) {
    super(props);

  }

  render() {
    console.log(this.props.todos);
    return (
      <div className="App">
        <div className="app_box_container">
          {/* 添加todo输入部分 */}
          <div className="box_one_container">
            <div className="box_title_contaoner">ToDoList</div>
            <div className="todo_input_box">
              <input type="text" ref="todoInput" className="input_container" placeholder="添加ToDo"/>
              <button className="button_container" onClick={() => {
                //获取输入框的内容
                var value = this.refs.todoInput.value;
                //为空判断
                if (value.length === 0) {
                  alert("添加的内容不能为空！");
                  return;
                }
                //组装todo对象
                var todo = {
                  context: value,
                  status: "PENDDING"
                }
                this.props.addTodo({
                  type: "ADDTODO",
                  todo: todo
                });
              }}>添加todo</button>
            </div>
          </div>
          {/* 内容部分 */}
          <div className="todo_content_container">
            {
              this.props.todos.map((element, index) => {
                return <div key={index}
                  className="todo_item" className="todo_content_wrapper">
                  <div className="todo_item_check">
                    <input type="checkbox"
                      checked={element.status === "PENDDING" ? false : true}
                      onChange={(event) => {
                        var checked = event.target.checked;
                        this.props.changeTodoStatus({
                          type: "CHANGESTATUS",
                          todo: element,
                          checked: checked
                        })
                      }} />
                  </div>
                  <div className="todo_item_content">{element.context}</div>
                  <div className="todo_item_delete">
                    <button onClick={() => {
                      this.props.deleteTodo({
                        type: "delete",
                        todo: element
                      })
                    }}>删除</button>
                  </div>
                </div>
              })
            }
          </div>
          <div className="todo_tool_bar">
            <div>
              <button onClick={() => {
                this.props.all({
                  type: "all"
                })
              }}>全部</button>
            </div>
            <div>
              <button onClick={() => {
                this.props.showPendding({
                  type: "pendding"
                })
              }}>正在进行</button>
            </div>
            <div>
              <button onClick={() => {
                this.props.showFinished({
                  type: "fininshed"
                })
              }}>已完成</button>
            </div>
            <div>
              <button>全部删除</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(rootReducer) {
  console.log(rootReducer.todoReducer.todos)
  return {
    todos: rootReducer.todoReducer.showTodos
  }
}

function mapActionToProps(dispatch) {
  return {
    addTodo: (action) => { dispatch(action) },
    changeTodoStatus: (action) => { dispatch(action) },
    all: (action) => { dispatch(action) },
    showPendding: (action) => { dispatch(action) },
    showFinished: (action) => { dispatch(action) },
    deleteTodo: (action) => { dispatch(action) }
  }
}
export default connect(mapStateToProps, mapActionToProps)(App);
